<!DOCTYPE html>
<html>

<head>
  <title>Happy Children's Day!</title>
  <style>
    @import url("https://fonts.googleapis.com/css?family=Caveat");

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0px;
      box-sizing: border-box;
      background: url("https://png.pngtree.com/background/20210710/original/pngtree-cartoon-cute-childrens-day-holiday-background-design-picture-image_973652.jpg");
      background-position: -160px 0px;
      background-size: cover;
    }

    body {
      font-family: "Caveat", cursive;
    }

    p {
      color: hotpink;
      font-size: 40px;
      display: inline;
      border-right: 4px solid gold;
      text-shadow: 3px 3px 8px black;
    }

    .letter {
      position: absolute;
      background: #fff;
      padding: 5px 10px;
      box-shadow: 1px 1px 25px gray;
      margin: 460px auto auto 25px;
      transform: rotate(-4.5deg);
      width: 84%;
      height: 40%;
    }

    #signature {
      right: 30px;
      top: 30px;
      position: absolute;
    }

    footer {
      font-family: Caveat;
      font-color: black;
      font-size: 25px;
      text-align: right;
    }
  </style>
</head>

<body>
  <div class="letter">
    <h1><span> Happy Children's Day!</span></h1>
    <h4 align="center" id="title"></h4>
    <h5 id="text"></h5>
    <h6 id="signature" align="right"></h6>
    <p id="type"></p>
  </div>
  <div class="footer">
    <h1>made in hao-xiugong uncle</h1>
</body>

</html>

<script>
  window.onload = function () {
    var i = "1";
    let textForTitle = "Let me celebrate this day with my coding.";
    let textForSign = "";
    let textForText = "";

    let x = 0;
    let writeText = () => {
      text.append(textForText.charAt(x));
      x++;
      if (x == 167) {
        let i3 = setInterval(writeSign, 250);
      }
    };

    let y = 0;
    let writeSign = () => {
      signature.append(textForSign.charAt(y));
      y++;
    };

    let z = 0;
    let writeTitle = () => {
      title.append(textForTitle.charAt(z));
      z++;

      if (z == 45) {
        clearInterval(i1);
        let i2 = setInterval(writeText, 150);
      }
    };
    let i1 = setInterval(writeTitle, 200);

    var txt =
      " \u{1F389}\u{1F38A}\u{1F382}\u{1F381}\u{1F389}\u{1F381} I hope Jiang-Lingshu will always be happy. To do what you love and are interested in. I, your uncle, don't want you to look upon learning things as painful or sad. Because as long as your heart is happy, every day is full of your own happiness. Happy Children's Day!  \u{1F389}\u{1F38A}\u{1F382}\u{1F381}\u{1F389}\u{1F381}----------Yours sincerely";

    var speed = 30;

    function type() {
      var a = document.getElementById("type");
      a.innerHTML += txt.charAt(i);
      i++;
      setTimeout(type, speed);
    }
    type();
  };
    	
</script>